<template>
  <div class='app-container'>
    <!-- 搜索 -->
    <div class='search'>
      <!-- 选择年份 -->
      <el-form :inline='true' :model='formInline'>
        <el-form-item>
          <el-date-picker v-model='formInline.year' type='year' size='mini' value-format='yyyy' placeholder='选择日期时间'></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type='primary' size='mini'>查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- tab页面 -->
    <el-tabs v-model='activeName' type='card' @tab-click='handleClick'>
      <el-tab-pane label='代办日历' name='first'>
        <Calendar :date='formInline.year'></Calendar>
      </el-tab-pane>
      <el-tab-pane label='代办列表' name='second'>
        <TodoList />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Calendar from './components/calendar.vue'
import TodoList from './components/todoList.vue'

export default {
  name: 'index',
  components: {
    Calendar,
    TodoList,
  },
  data() {
    return {
      formInline: {
        year: '',
      },
      date: '',
      activeName: 'first', // 选项卡下标
    }
  },
  created() {
    this.formInline.year = this.getDay(0)
  },
  methods: {
    handleClick() {

    },
    /**
     * @description: 获取当前日期
     * @author: hst
     * @param: day: 0今天，-1昨天
     */
    getDay(day) {
      var today = new Date()
      var targetday = today.getTime() + 1000 * 60 * 60 * 24 * day
      today.setTime(targetday)
      var tYear = today.getFullYear()
      var tMonth = today.getMonth()
      var tDate = today.getDate()
      tMonth = this.doHandleMonth(tMonth + 1)
      tDate = this.doHandleMonth(tDate)
      return tYear + '-' + tMonth + '-' + tDate
    },
    doHandleMonth(month) {
      var m = month
      if (month.toString().length === 1) {
        m = '0' + month
      }
      return m
    },
  },
}
</script>

<style lang='scss' scoped>
::v-deep .el-tabs__nav-scroll {
  float: right;
}

.app-container {
  position: relative;
}

.search {
  position: absolute;
  left: 20px;
  top: 14px;
  width: 500px;
  height: 40px;
  z-index: 99;
}
</style>
